<template>
  <div class="container">
    <div class="header">
      <div class="header-left-item">
        <div><img id="user-avatar-img" :src="circleUrl" alt="" /></div>
        <div>
          <h2>{{ userInfo.universityName }}-课程档案录入</h2>
        </div>
      </div>
      <div class="header-right-item">
        <el-button type="primary" round @click="addFile">录入档案</el-button>
      </div>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <el-form label-position="right" label-width="120px" :model="courseInfo">
          <el-form-item label="课程名称：">
            <el-input v-model="courseInfo.courseName"></el-input>
          </el-form-item>
          <el-form-item label="课程简介：">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容："
              v-model="courseInfo.courseIntroduction"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="教室名称：">
            <el-input v-model="courseInfo.classRoom"></el-input>
          </el-form-item>
          <div id="buju-content1">
            <el-form-item label="授课老师：">
              <el-select
                v-model="courseInfo.teacherId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in teacherList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="学分：">
              <el-select
                v-model="courseInfo.credit"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in creditList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div id="buju-content1">
            <el-form-item label="学院：">
              <el-select
                v-model="courseInfo.collegeId"
                filterable
                placeholder="请选择"
                @change="collegeChange"
              >
                <el-option
                  v-for="item in collegeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="专业：">
              <el-select
                v-model="courseInfo.majorId"
                filterable
                placeholder="请选择"
                @change="majorChange"
              >
                <el-option
                  v-for="item in majorList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级：">
              <el-select
                v-model="courseInfo.classId"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div id="buju-content1">
            <el-form-item label="修读方式：">
              <el-select
                v-model="courseInfo.compulsory"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in compulsoryList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="星期几：">
              <el-select
                v-model="courseInfo.weekDay"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in weekDayList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="第几节课：">
              <el-select
                v-model="courseInfo.lesson"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in lessonList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div id="buju-content1">
            <el-form-item label="大几：">
              <el-select
                v-model="courseInfo.term"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in termList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开课学期：">
              <el-select
                v-model="courseInfo.lastNext"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in lastNextList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div id="buju-content1">
            <el-form-item label="开课时间：">
              <el-date-picker
                v-model="courseInfo.beginTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结课时间：">
              <el-date-picker
                v-model="courseInfo.endTime"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {
  downloadAvatar,
  getUserDetails,
  getCollegeListByUniversityId,
  getMajorListByCollegeId,
  getClassListByMajorId,
  getTeacherListByUniversityId,
  addCourse,
} from "@/api";
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //默认头像
      userInfo: {}, //管理员基本信息
      courseInfo: {
        collegeId: "",
        majorId: "",
        classId: "",
        teacherId: "",
        courseName: "",
        compulsory: "",
        courseIntroduction: "",
        weekDay: "",
        classRoom: "",
        lesson: "",
        credit: "",
        beginTime: "",
        endTime: "",
        term: "",
        lastNext: "",
      },
      collegeList: {}, //学院信息
      majorList: {}, //学院信息
      classList: {}, //班级信息
      teacherList: {}, //授课老师
      compulsoryList: [
        { key: "0", value: "必修课" },
        { key: "1", value: "选修课" },
      ], //修读方式
      weekDayList: [
        { key: "0", value: "星期一" },
        { key: "1", value: "星期二" },
        { key: "2", value: "星期三" },
        { key: "3", value: "星期四" },
        { key: "4", value: "星期五" },
        { key: "5", value: "星期六" },
        { key: "6", value: "星期日" },
      ], //星期几
      lessonList: [
        { key: "0", value: "第一节课" },
        { key: "1", value: "第二节课" },
        { key: "2", value: "第三节课" },
        { key: "3", value: "第四节课" },
        { key: "4", value: "第五节课" },
      ], //第几节课
      termList: [
        { key: "0", value: "大一" },
        { key: "1", value: "大二" },
        { key: "2", value: "大三" },
        { key: "3", value: "大四" },
      ], //大几
      lastNextList: [
        { key: "0", value: "上学期" },
        { key: "1", value: "下学期" },
      ], //开课学期
      creditList: [
        { key: "1", value: "1个学分" },
        { key: "1.5", value: "1.5个学分" },
        { key: "2", value: "2个学分" },
        { key: "2.5", value: "2.5个学分" },
        { key: "3", value: "3个学分" },
        { key: "3.5", value: "3.5个学分" },
        { key: "4", value: "4个学分" },
        { key: "4.5", value: "4.5个学分" },
        { key: "5", value: "5个学分" },
        { key: "5.5", value: "5.5个学分" },
        { key: "6", value: "6个学分" },
        { key: "6.5", value: "6.5个学分" },
        { key: "7", value: "7个学分" },
      ], //课程学分
    };
  },
  created() {
    this.downloadManagerAvatar();
    this.initUserInfo();
    this.initCollegeList();
    this.initTeacherList();
  },
  methods: {
    //下载用户头像
    async downloadManagerAvatar() {
      let params = {
        avatarUrl: this.$store.state.user.userInfo.avatarUrl,
      };
      let res = await downloadAvatar(params);
      let avatar_img = document.querySelector("#user-avatar-img");
      let imageType = res.type; //获取图片类型
      const blob = new Blob([res], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      avatar_img.src = imageUrl;
      avatar_img.onload = function (e) {
        window.URL.revokeObjectURL(avatar_img.src); //释放URL.createObjectURL()创建的对象
      };
    },
    async initUserInfo() {
      let res = await getUserDetails();
      if (res.code !== 0) {
        this.$message.error("获取用户基本信息失败");
        return;
      }
      this.userInfo = res.data;
    },
    async initCollegeList() {
      let res = await getCollegeListByUniversityId(
        this.$store.state.user.userInfo.universityId
      );
      if (res.code == 0) {
        this.collegeList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    async initTeacherList() {
      let res = await getTeacherListByUniversityId(
        this.$store.state.user.userInfo.universityId
      );
      if (res.code == 0) {
        this.teacherList = res.data;
      } else {
        this.$message.error(res.msg);
      }
    },
    //选择学院
    async collegeChange(collegeId) {
      let res = await getMajorListByCollegeId(collegeId);
      if (res.code == 0) {
        this.majorList = res.data;
      } else {
        this.majorList = [];
        this.$message.error(res.msg);
      }
    },
    //选择专业
    async majorChange(majorId) {
      let res = await getClassListByMajorId(majorId);
      if (res.code == 0) {
        this.classList = res.data;
      } else {
        this.$message.error(res.msg);
        this.classList = [];
      }
    },
    //录入学院档案
    async addFile() {
      let collegeId = this.courseInfo.collegeId;
      let majorId = this.courseInfo.majorId;
      let classId = this.courseInfo.classId;
      let teacherId = this.courseInfo.teacherId;
      let courseName = this.courseInfo.courseName;
      let compulsory = this.courseInfo.compulsory;
      let courseIntroduction = this.courseInfo.courseIntroduction;
      let weekDay = this.courseInfo.weekDay;
      let classRoom = this.courseInfo.classRoom;
      let lesson = this.courseInfo.lesson;
      let credit = this.courseInfo.credit;
      let beginTime = this.courseInfo.beginTime;
      let endTime = this.courseInfo.endTime;
      let term = this.courseInfo.term;
      let lastNext = this.courseInfo.lastNext;
      if (
        collegeId.trim() == "" ||
        majorId.trim() == "" ||
        classId.trim() == "" ||
        teacherId.trim() == "" ||
        courseName.trim() == "" ||
        compulsory.trim() == "" ||
        courseIntroduction.trim() == "" ||
        weekDay.trim() == "" ||
        classRoom.trim() == "" ||
        lesson.trim() == "" ||
        credit.trim() == "" ||
        beginTime.trim() == "" ||
        endTime.trim() == "" ||
        term.trim() == "" ||
        lastNext.trim() == ""
      ) {
        this.$message.warning("不允许信息有空值，请仔细检查");
        return;
      }
      // 发送录入档案请求;
      let res = await addCourse(this.courseInfo);
      if (res.code == 0) {
        this.$message.success("录入档案成功");
        // this.clearCourseInfo();
      } else {
        this.$message.error(res.msg);
      }
    },
    clearCourseInfo() {
      this.courseInfo.collegeId = "";
      this.courseInfo.majorId = "";
      this.courseInfo.classId = "";
      this.courseInfo.teacherId = "";
      this.courseInfo.courseName = "";
      this.courseInfo.compulsory = "";
      this.courseInfo.courseIntroduction = "";
      this.courseInfo.weekDay = "";
      this.courseInfo.classRoom = "";
      this.courseInfo.lesson = "";
      this.courseInfo.credit = "";
      this.courseInfo.beginTime = "";
      this.courseInfo.endTime = "";
      this.courseInfo.term = "";
      this.courseInfo.lastNext = "";
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.header {
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(217, 212, 212);
  .header-left-item {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    div {
      margin: 5px;
    }
  }
  .header-right-item {
    padding-right: 70px;
  }
}
.my-content {
  padding-bottom: 30px;
  border-radius: 0px 0px 10px 10px;
  background: rgb(255, 255, 255);
  width: 70%;
  .my-content-item {
    padding-right: 30px;
    padding-top: 20px;
    #buju-content1 {
      display: flex;
      align-items: center;
    }
  }
}

#user-avatar-img {
  height: 90px;
  width: 90px;
  border-radius: 50px;
}
</style>